import React, {useState} from 'react';
import {Button, Select} from "antd";
import {connect} from "dva";
import {CustomerInformationState} from "@/pages/customer/information/data";
import Card from "@/pages/customer/information/components/Card";

const {Option} = Select;

export interface SearchBarProps {
  [propName: string]: any;
}

const mapStateToProps = (state: CustomerInformationState) => ({
  customerInfo: state['customerInformation'].customerInfo
});

const SearchBar: React.FC<SearchBarProps> = (props) => {
  const {dispatch} = props;
  const [inputValue, setInputValue] = useState(undefined);
  return (
    <Card>
      <Select
        showSearch
        value={inputValue}
        style={{width: 200}}
        placeholder={'Select a person'}
        filterOption={(input: any, option: any) =>
          option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
        }
        onChange={(value:any) => {
          setInputValue(value);
          dispatch({
            type: 'customerInformation/fetchCustomerInfo', payload: {
              customerId: value
            }
          })
        }}
        notFoundContent={null}
      >
        <Option value="1001">John Goodenough</Option>
        <Option value="1002">Stanley Whittingham</Option>
        <Option value="1003">Akira Yoshino</Option>
      </Select>
      <Button
        style={{marginLeft: '10px'}}
        type="primary"
        onClick={() => {
          setInputValue(undefined);
        }}
      >Reset Text</Button>
      <Button
        style={{marginLeft: '10px'}}
        type="primary"
        onClick={() => {
          setInputValue(undefined);
          dispatch({type: 'customerInformation/clear'});
        }}
      >Reset Banner</Button>
    </Card>
  );
};

export default connect(mapStateToProps)(SearchBar);
